import { useState } from "react";
import { useErrorBoundary } from "react-error-boundary";

const fetchUserAPI = async (): Promise<string> => {
  const username = "piyoko";
  const ss = new Date().getMilliseconds();
  if (ss % 2 === 0) {
    throw new Error("fetchUserAPI中的错误");
  }
  return username;
};

function Page5() {
  const [userName, setUserName] = useState("");
  const { showBoundary } = useErrorBoundary();

  const onClick = () => {
    fetchUserAPI()
      .then((res) => {
        setUserName(res);
      })
      .catch((err) => {
        showBoundary(err);
      });
  };

  return (
    <div style={{ backgroundColor: "#8CCDB0" }}>
      <h3>Page5</h3>
      <button type="button" onClick={onClick}>
        按钮
      </button>
      <p>用户名：{userName}</p>
    </div>
  );
}
export default Page5;
